<template>
  <div class="space-y-4">
    <div class="flex items-center gap-2">
      <button
        class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
        @click="$emit('close')"
      >
        <svg
          class="w-5 h-5 text-gray-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </button>
      <h2 class="text-lg font-medium">
        {{ type === "likes" ? "我的点赞" : "我的收藏" }}
      </h2>
    </div>

    <!-- Tab切换 -->
    <div class="flex gap-3">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        class="px-4 py-2 rounded-md transition-all duration-200 font-medium"
        :class="{
          'bg-blue-500 text-white shadow-sm hover:bg-blue-600': currentTab === tab.key,
          'bg-gray-100 text-gray-600 hover:bg-gray-200': currentTab !== tab.key,
        }"
        @click="currentTab = tab.key"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="mt-4">
      <div class="space-y-4">
        <!-- 使用骨架屏 -->
        <template v-if="loading">
          <div v-for="i in 3" :key="i" class="p-4 bg-gray-50 rounded-lg animate-pulse">
            <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
            <div class="h-4 bg-gray-200 rounded w-1/2"></div>
          </div>
        </template>

        <!-- 实际内容 -->
        <template v-else>
          <div
            v-for="item in items"
            :key="item.id"
            class="p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-all cursor-pointer"
            @click="handleItemClick(item)"
          >
            <div class="flex justify-between items-center">
              <div class="font-medium">{{ item.title }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { user } from '@/api/frontend/user';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  type: {
    type: String,
    required: true,
    validator: (value) => ["likes", "collections"].includes(value),
  },
});

defineEmits(["close"]);

// 修改tabs配置
const tabs = [
  { key: 'topic', label: '题目' },
  { key: 'post', label: '帖子' }
];

const currentTab = ref('topic');
const loading = ref(false);
const items = ref([]);

// 获取列表数据
const fetchList = async () => {
  loading.value = true;
  try {
    const res = await (props.type === 'likes' 
      ? user.getMyLikeList(currentTab.value)
      : user.getMyFavourList(currentTab.value));
      
    if (res.code === 200) {
      items.value = res.data || [];
    }
  } catch (error) {
    console.error(`获取${props.type === 'likes' ? '点赞' : '收藏'}列表失败:`, error);
  } finally {
    loading.value = false;
  }
};

// 监听type变化重新获取数据
watch(() => props.type, () => {
  fetchList();
});

// 同时监听currentTab变化
watch(currentTab, () => {
  fetchList();
});

onMounted(() => {
  fetchList();
});

// 修改点击处理方法
const handleItemClick = (item) => {
  if (currentTab.value === 'topic') {
    router.push({
      name: 'SqlProblemDetail',
      params: { id: item.id }
    });
  } else {
    router.push({
      path: `/post/${item.id}`
    });
  }
};

// 修改formData的初始状态
const formData = ref({
  username: "",
  nickname: "",
  email: "",
  status: "1", // 设置默认状态为正常(1)
});

// 修改编辑按钮的处理方法
const handleEdit = (row) => {
  isEdit.value = true;
  formData.value = {
    id: row.id,
    username: row.username || "",
    nickname: row.nickname || "",
    email: row.email || "",
    status: String(row.status || "1"), // 设置默认值
    avatar: row.avatar || "",
    sign: row.sign || "",
    gender: row.gender ?? -1,
    position: row.position || "",
    role: row.role ?? 1
  };
  showModal.value = true;
};

// 修改表格选择编辑按钮的处理方法
const edit = async () => {
  // ...existing code...
  const selectedRow = selectedRows.value[0];
  isEdit.value = true;
  formData.value = {
    id: selectedRow.id,
    username: selectedRow.username || "",
    nickname: selectedRow.nickname || "",
    email: selectedRow.email || "",
    status: String(selectedRow.status || "1"), // 设置默认值
    avatar: selectedRow.avatar || "",
    sign: selectedRow.sign || "",
    gender: selectedRow.gender ?? -1,
    position: selectedRow.position || "",
    role: selectedRow.role ?? 1
  };
  showModal.value = true;
};
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
